Angular Material এর <mat-datepicker> কম্পোনেন্ট ব্যবহার করে সহজেই ডেটপিকার তৈরি করা যায়, যা ব্যবহারকারীদের তারিখ নির্বাচন করার সুবিধা প্রদান করে। ডেটপিকারটি Material Design এর গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনে সুন্দরভাবে একত্রিত হয়।

ডেটপিকার কনফিগার করার জন্য, Angular Material এর MatDatepickerModule এবং MatInputModule মডিউল দুটি ইমপোর্ট করতে হবে।

ডেটপিকার কনফিগার করার ধাপসমূহ

১. মডিউল ইমপোর্ট করা

প্রথমে, আপনাকে Angular অ্যাপ্লিকেশনে MatDatepickerModule এবং MatInputModule মডিউলগুলো ইমপোর্ট করতে হবে।

app.module.ts ফাইলে ইমপোর্ট করুন:

import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    // আপনার কম্পোনেন্ট
  ],
  imports: [
    // অন্যান্য মডিউলস
    MatDatepickerModule,
    MatInputModule,
    MatNativeDateModule,   // Native datepicker প্রদান করে
    ReactiveFormsModule
  ]
})
export class AppModule { }

২. ডেটপিকার টেমপ্লেট

ডেটপিকার ব্যবহার করার জন্য HTML টেমপ্লেটে <mat-datepicker> কম্পোনেন্ট ব্যবহার করা হয়। ডেটপিকার কম্পোনেন্টের সাথে <input matInput> এবং matDatepicker ডিরেকটিভ ব্যবহার করতে হবে।

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" placeholder="Select a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

এখানে:

• <input matInput> ডেটপিকার ইনপুট ফিল্ড।
• [matDatepicker]="picker" নির্দেশনা, যেখানে picker হলো ডেটপিকার টেমপ্লেট রেফারেন্স।
• <mat-datepicker #picker></mat-datepicker> ডেটপিকার কম্পোনেন্ট যা তারিখ নির্বাচন করার ইন্টারফেস প্রদান করে।

৩. ডেটপিকার কনফিগারেশন

আপনি ডেটপিকারটি কাস্টমাইজ করতে পারেন, যেমন তারিখের ফরম্যাট, সীমাবদ্ধতা ইত্যাদি। নিচে কিছু সাধারণ কনফিগারেশন উদাহরণ দেওয়া হলো।

১. তারিখ ফরম্যাট কাস্টমাইজ করা

ডেটপিকারটি কাস্টম তারিখ ফরম্যাটে প্রদর্শন করতে হলে, MAT_DATE_FORMATS কনফিগারেশন ব্যবহার করতে হবে।

import { MAT_DATE_FORMATS } from '@angular/material/core';

export const MY_DATE_FORMATS = {
  parse: {
    dateInput: 'YYYY/MM/DD',
  },
  display: {
    dateInput: 'YYYY/MM/DD',
    monthYearLabel: 'MMM YYYY',
    dateA11yLabel: 'YYYY/MM/DD',
    monthYearA11yLabel: 'MMMM YYYY',
  },
};

@NgModule({
  providers: [
    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
  ],
})
export class AppModule { }

এখানে তারিখ YYYY/MM/DD ফরম্যাটে প্রদর্শিত হবে।

২. ডেটপিকার রেঞ্জ কনফিগার করা

আপনি একটি নির্দিষ্ট তারিখ রেঞ্জ সিলেকশন কনফিগার করতে পারেন, যেমন আজকের তারিখ থেকে আগামী মাস পর্যন্ত।

import { Component, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-datepicker-range',
  templateUrl: './datepicker-range.component.html',
  styleUrls: ['./datepicker-range.component.css']
})
export class DatepickerRangeComponent implements OnInit {

  minDate: Date;
  maxDate: Date;

  ngOnInit() {
    this.minDate = new Date();
    this.maxDate = new Date();
    this.maxDate.setMonth(this.maxDate.getMonth() + 1); // ১ মাস পরের তারিখ
  }
}

এখানে, minDate এবং maxDate ব্যবহার করে ডেটপিকারটির জন্য রেঞ্জ সেট করা হচ্ছে।

HTML:

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [min]="minDate" [max]="maxDate" placeholder="Select a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

৩. তারিখ নির্বাচন করা এবং ব্যবহার করা

আপনি যখন তারিখ নির্বাচন করবেন, তখন সেই মানটি ngModel বা FormControl এর মাধ্যমে আপনার টাইপস্ক্রিপ্ট কোডে পেতে পারেন।

<mat-form-field>
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" placeholder="Select a date">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

<p>Selected Date: {{ selectedDate | date }}</p>

TypeScript:

export class DatepickerComponent {
  selectedDate: Date;
}

Angular Material এর mat-datepicker কম্পোনেন্ট ব্যবহার করে আপনি সহজেই একটি তারিখ নির্বাচনকারী ফিল্ড তৈরি করতে পারেন। এটি অনেক ধরনের কনফিগারেশন সমর্থন করে, যেমন তারিখ ফরম্যাট কাস্টমাইজেশন, রেঞ্জ নির্ধারণ, এবং অন্যান্য ফিচার। Angular Material ডেটপিকার ব্যবহারের মাধ্যমে একটি সুন্দর এবং কার্যকরী UI তৈরি করা যায় যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।